<template>
  <div>
    <van-nav-bar placeholder fixed>
      <template #left>
        <img src="../../assets/toutiao_logo.png" alt="" />
      </template>
      <template #right>
        <van-icon name="search" size="0.48rem" />
      </template>
    </van-nav-bar>
    <van-tabs v-model="active" animated sticky offset-top="1.226666667rem">
      <van-tab
      v-for="obj in channelList"
      :key="obj.id"
      :title="obj.name"
      :name="obj.id"
      ><article-list :channel_id="active"></article-list></van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getChnannelList } from '@/api'
import ArticleList from './ArticleList.vue'
export default {
  data () {
    return {
      active: 0,
      channelList: []
    }
  },
  async created () {
    const res = await getChnannelList()
    // console.log(res)
    this.channelList = res.data.data.channels
  },
  components: {
    ArticleList
  }
}
</script>

<style lang='less' scoped>
/deep/ .van-nav-bar__left img {
  width: 100px;
  height: 30px;
}
</style>
